#unlock-modal.modal.fade(tabindex='-1', role='dialog')
  .modal-dialog(role='document')
    .modal-content
      .modal-header
        button.close(type='button', data-dismiss='modal', aria-label='Close')
          span(aria-hidden='true') ×
        h4#unlock-modal-title.modal-title.user-modal-install-title Read before installing!
      .modal-body
        #actions(style="display: inline-block;")
      .modal-footer
        button#btn-installModal.btn.btn-primary(type='button', data-dismiss='modal', onclick="") Ok
  script.
    function addAction(action) {
      // can be used in html IDs
      let baseId = action.title.toLowerCase().replace(/\s/g,"-");

      // div to contain entire action row
      let _div = document.createElement("div");
      _div.className = "form-group";

      // label describing the action
      let _label = document.createElement("label");
      _label.className = "col-xs-3 control-label";
      _label.appendChild(document.createTextNode(action.title));
      _div.appendChild(_label);

      // div to contain input/select element
      let _subdiv = document.createElement("div");
      _subdiv.className = "col-xs-9";

      // create the text
      let _p = document.createElement("p");
      _p.appendChild(document.createTextNode(action.description));
      _p.id = "actions-" + baseId;

      // put it all in there
      _subdiv.appendChild(_p);
      _div.appendChild(_subdiv);
      $("#actions").append(_div);

      // help link
      if (action.link) {
        let _tooltipdiv = document.createElement("div");
        _tooltipdiv.className = "col-xs-3";
        _div.appendChild(_tooltipdiv);
        let _tooltip = document.createElement("p");
        _tooltip.className = "col-xs-9";
        let _tooltiplink = document.createElement("a");
        _tooltiplink.id = baseId + "_link"
        _tooltiplink.appendChild(document.createTextNode("More..."));
        _tooltip.appendChild(_tooltiplink);
        _div.appendChild(_tooltip);
        // HACK: link target can not be set before, because the element needs to have already been created
        if (action.link) $("#" + baseId + "_link").click(() => shell.openExternal(action.link));
      }
    }

    ipcRenderer.on("user:unlock", (event, installConfig) => {
      document.getElementById("unlock-modal-title").innerHTML = "Unlock the device";
      modals.show('unlock');
      document.getElementById("actions").innerHTML = ""; // remove all previously added actions
      installConfig.unlock.forEach(actionId => addAction(installConfig.user_actions[actionId]));
    });

    ipcRenderer.on("user:prerequisites", (event, installConfig, osIndex) => {
      document.getElementById("unlock-modal-title").innerHTML = "Before we continue...";
      modals.show('unlock');
      document.getElementById("actions").innerHTML = ""; // remove all previously added actions
      installConfig.operating_systems[osIndex].prerequisites.forEach(actionId => addAction(installConfig.user_actions[actionId]));
    });
